<template>
  <div>
      <!-- 我是详情页 -- {{ $route.query.title }} -->

      <header class="header">
          <span @click="back" class="back">
              返回
          </span>
          {{ detailInfo.title }}
      </header>
      <img style="width: 100%" :src="detailInfo.src" alt="">
  </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            detailInfo: {}
        }
    },
    created() {
        // this.$router   路由实例 

        // this.$route    当前路由信息


        axios.get("/detail", {
            params: {
                id: this.$route.query.id
            }
        }).then(res => {
            this.detailInfo = res.data
        })
        // console.log(this.$route)
    },
    methods: {
        back() {
            // back  返回上一层
            // go    去往指定页面
            // this.$router.back()
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.header {
    height: 46px;
    line-height: 46px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    position: relative;
}

.header > .back {
    font-size: 14px;
    font-weight: 400;
    position: absolute;
    left: 10px;
}
</style>